import React from "react";
import SideList from "./SideList";
import UserList from "./UserList";
 
interface SideNavProps{
    userList: NicknameData[];
};

function SideNav(props: SideNavProps) {

    const { userList } = props;

    return (
        <div className="collapse col-md-0 col-lg-4 p-0" id="collapseUserList">
            <div className="card card-body p-0 bg-dark" style={{borderRadius: "0"}}>
                <div className="w-auto accordion" id="accordionList" style={{height: "100vh"}}>
                    <button 
                        className="btn btn-outline-primary m-2 w-50" type="button"
                        data-toggle="collapse" data-target="#collapseUserList" 
                        aria-expanded="false" aria-controls="collapseUserList"
                    >
                        &lt;--- Back
                    </button>
                    <SideList 
                        title={"用户列表"} 
                        targetId={"collapseUser"}
                        collapseName={"collapse show"}
                        dataParent={"accordionList"}
                        cardHeading={"headingUser"}
                    >
                        <UserList userList={userList} />
                    </SideList>
                </div>
            </div>
        </div>
    );
}

export default SideNav;